<template>
    <div class="assess_form pulmonary">
        <div class="form_title">XXXX医疗机构</div>
        <div class="form_name">肺功能和日常生活评定</div>
        <div class="form_patient_bar">
            <div v-for="(item, index) in patientStruct" :key="index" class="patient_info_item">
                <div class="item_label">{{ item.label }}：</div>
                <div class="item_value">{{ formType == 'template' ? item.label : patientInfo[item.key] }}</div>
            </div>
        </div>
        <el-form ref="assessForm" :model="selfFormData" :rules="rules">
            <el-form-item prop="pulmonaryValue">
                <table border class="form_table">
                    <colgroup>
                        <col>
                        <col>
                        <col style="width: 100px;">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>分级</th>
                            <th class="text_center">表现</th>
                            <th class="text_center">结果</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in assessFormStruct" :key="index"
                            :class="{ checked: formType === 'view' && selfFormData.pulmonaryValue === index }">
                            <td>{{ item.level }}</td>
                            <td>{{ item.content }}</td>
                            <td v-if="formType === 'template'" class="text_center assess_radio">
                                <el-radio v-model="selfFormData.pulmonaryValue" :label="index" disabled/>
                            </td>
                            <td v-if="formType === 'view'" class="text_center">
                                <i v-if="selfFormData.pulmonaryValue === index" class="el-icon-check check_icon"></i>
                            </td>
                            <td v-if="formType === 'edit'" class="text_center assess_radio">
                                <el-radio v-model="selfFormData.pulmonaryValue" :label="index" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </el-form-item>
        </el-form>
        <div v-if="formType !== 'template'" class="assess_create_info">
            <div class="create_info_item">
                <div class="item_label">评定者：</div>
                <div class="item_value">{{ selfFormData.evaluateUser }}</div>
            </div>
            <div class="create_info_item">
                <div class="item_label">评定时间：</div>
                <div class="item_value">{{ selfFormData.evaluateTime }}</div>
            </div>
        </div>
    </div>
</template>

<script>
const initDefaultForm = () => {
    return {
        pulmonaryValue: undefined,
        evaluateUser: '',
        evaluateTime: ''
    }
}
const assessFormStruct = [
    {
        level: '0级',
        content: '虽有不同程度肺气肿，但活动如常人，日常生活照常，活动时无气短',
        contentKey: 'data1'
    },
    {
        level: '1级',
        content: '一般劳动时出现气短',
        contentKey: 'data2'
    },
    {
        level: '2级',
        content: '平地步行无气短，速度较快或登楼、上坡时，同龄健康人而有气短',
        contentKey: 'data3'
    },
    {
        level: '3级',
        content: '慢走不及百步即有气短',
        contentKey: 'data4'
    },
    {
        level: '4级',
        content: '讲话或穿衣等轻微动作即有气短',
        contentKey: 'data5'
    },
    {
        level: '5级',
        content: '安静时出现气短、无法平卧',
        contentKey: 'data5'
    }
]
export default {
    name: 'Pulmonary',
    props: {
        formType: {
            type: String,
            default: 'template' // 表单类型：template：模板，edit：评估，view：详情
        },
        patientInfo: {
            type: Object,
            default: () => ({}) // 患者信息
        },
        doctorType: {
            type: String,
            default: 'hospital' // 医生类型：hospital：住院医生，outpatient：门诊医生，therapists：治疗师
        },
        assessInfo: {
            type: Object,
            default: () => ({}) // 评定表信息
        }
    },
    data() {
        return {
            assessFormStruct,
            selfFormData: {},
            rules: {
                pulmonaryValue: [
                    { required: true, message: '请选择项目', trigger: 'change' }
                ]
            }
        }
    },
    computed: {
        patientStruct() {
            if (this.formType === 'edit' || this.formType === 'view') {
                if (['hospital', 'therapists'].includes(this.doctorType)) {
                    return [{
                        label: '姓名',
                        key: 'patientName'
                    }, {
                        label: '病区',
                        key: 'sickRegion'
                    }, {
                        label: '床号',
                        key: 'bedNum'
                    }, {
                        label: '住院号',
                        key: 'admissionNum'
                    }]
                } else {
                    return [{
                        label: '姓名',
                        key: 'patientName'
                    }, {
                        label: '门诊号',
                        key: 'admissionNum'
                    }]
                }
            } else {
                return [{
                    label: '姓名',
                    key: ''
                }, {
                    label: '门诊号/住院号',
                    key: ''
                }]
            }
        }
    },
    watch: {
        assessInfo: function (val) {
            this.selfFormData = Object.assign(initDefaultForm(), this.assessInfo)
        }
    },
    mounted() {
        this.selfFormData = Object.assign(initDefaultForm(), this.assessInfo);
    },
    methods: {
        getFormData() {
            return new Promise((resolve, reject) => {
                this.$refs.assessForm.validate((valid) => {
                    if (valid) {
                        resolve({
                            ...this.selfFormData
                        })
                    } else {
                        reject('存在未通过表单校验的数据')
                        return false
                    }
                })
            })
        },
        changeToEstimateList(estimateId, submitForm) {
            const keyList = []
            Object.keys(submitForm).forEach(key => {
                if(submitForm[key]){
                keyList.push({
                    key,
                    value: JSON.stringify(submitForm[key])
                })
                }
            })
            return JSON.stringify({
                estimateId,
                keyList
            })
        },
        async saveLocalFormData(source, patientId) {
            let data = await this.getFormData();
            const estimateId = 2
            const submitForm = {
                evaluateSource: source,
                pulmonaryValue: data.pulmonaryValue
            }
            localStorage.setItem(`estimate_${source}_${patientId}_${estimateId}`, this.changeToEstimateList(estimateId, submitForm)); 
        },
    }
}
</script>

<style lang="scss" scoped>
@import url('./style.scss');

.pulmonary {
    .assess_radio {
        ::v-deep .el-radio__label {
            display: none;
        }
    }

    .check_icon {
        font-size: 24px;
        vertical-align: middle;
    }
}
</style>
